<template>
  <div :id="echartId" class="echart-box"></div>
</template>

<script lang="ts" setup>
// 例如：import 《组件名称》 from '《组件路径》';
import { defineComponent, markRaw, onMounted, onUnmounted, reactive, toRefs, watch } from 'vue';
import * as ec from 'echarts';
import _ from 'lodash-es';
const props = defineProps(['echartId', 'pieData']);
// 这里存放数据
const data: any = reactive({
  myChart: '',
  colorList: [
    '#5f49b0',
    '#7b2fd5',
    '#354cc2',
    '#08926a',
    '#c23d47',
    '#d12987',
    '#e6ad06',
    '#d07022',
  ],
});
// watch(()=>props,(newVal,oldVal)=>{
//   console.log("---------------",newVal,oldVal);
// },{
//   immediate:true,
//   deep:true
// })

const drwaEchart = () => {
  if(data.myChart)ec.dispose(data.myChart)
  const chartDom: any = document.getElementById(props.echartId);
  data.myChart = markRaw(ec.init(chartDom));
  const colors = ['#3e9ffa', '#75a8ce'];
  let option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'cross',
        label: {
          backgroundColor: '#6a7985',
        },
      },
    },
    grid: {
      left: '20px',
      top: '30px',
      right: '20px',
      bottom: '0',
      containLabel: true,
    },
    xAxis: [
      {
        type: 'category',
        data: props.pieData.xData,
        show: true,
        boundaryGap: false,
        axisTick: {
          show: false,
        },
        axisLabel: {
          color: 'rgba(209, 239, 255, 0.65)',
          fontSize: 14,
        },
      },
    ],
    yAxis: {
      type: 'value',
      show: true,
      splitLine: {
        show: false,
      },
      axisTick: {
        show: false,
      },
      axisLabel: {
        color: 'rgba(193, 233, 255, 0.8)',
        fontSize: 14,
      },
    },
    series: props.pieData.yData.map((item, index) => {
      return {
        name: 'PM值',
        data: item.data,
        type: 'line',
        stack: 'Total',
        lineStyle: {
          width: 2,
          color:colors[index],
        },
        showSymbol: false,
        emphasis: {
          focus: 'series',
        },
        areaStyle: {
          opacity: 0.8,
          color: new ec.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: colors[index],
            },
            {
              offset: 1,
              color: 'rgba(1, 1, 1, 0.8)',
            },
          ]),
        },
      };
    }),
  };
  option && data.myChart.setOption(option);
};
onMounted(() => {
  window.addEventListener('resize', (e) => {
    data.myChart && data.myChart.resize();
  });
});
onUnmounted(() => {
  window.removeEventListener('resize', drwaEchart);
});
defineExpose({
  drwaEchart,
});
</script>

<style scoped lang="less">
.echart-box {
  height: 180px;
  width: 100%;
}
</style>
